import React, { PureComponent } from 'react'
import { ListItem, ListInfo, LoadMore } from '../style';
import { connect } from 'react-redux'
import { actionCreator } from '../store'
import { Link } from 'react-router-dom'

class List extends PureComponent {
  render () {
    const { list, getMoreList, articlePage } = this.props
    return (
      <div>
        {
          list.map((item, index) => {
            return (
              <Link to={"/detail/" + item.get('id')} key={index}>
                <ListItem>
                  <img src={item.get('imgUrl')} alt="" />
                  <ListInfo>
                    <h3 className='title'>{item.get('title')}</h3>
                    <p className='desc'>{item.get('desc')}</p>
                  </ListInfo>
                </ListItem>
              </Link>
            )
          })
        }
        <LoadMore onClick={() => getMoreList(articlePage)}>更多文字</LoadMore>
      </div>
    )
  }
}


const mapState = (state) => {
  return {
    list: state.getIn(['home', 'articleList']),
    articlePage: state.getIn(['home', 'articlePage'])
  }
}
const mapDispatch = (dispatch) => {
  return {
    getMoreList (articlePage) {
      dispatch(actionCreator.getMoreList(articlePage))
    }
  }
}

export default connect(mapState, mapDispatch)(List)
